.layer {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: all 0.4s;
  opacity: 0;

  .content {
    position: fixed;
    background: #fff;
    width: 100%;
    overflow: hidden;
    transition: all 0.4s;
    opacity: 0;
  }

  .toTop {
    left: 0;
    bottom: 0;
    height: auto;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    transform: translateY(100%);
  }

  .toLeft {
    height: 100vh;
    left: 100vw;
    top: 0;
  }

  .toRight {
    height: 100vh;
    left: -100vw;
    top: 0;
  }

  &.active {
    opacity: 1;

    .content {
      opacity: 1;
    }

    .toTop {
      transform: translateY(0);
    }

    .toLeft {
      left: 0;
    }

    .toRight {
      left: 0;
    }
  }
}



.content {
  position: fixed;
  background: #fff;
  width: 100%;
  overflow: hidden;
  transition: all 0.4s;
  opacity: 0;
}

.toTop {
  left: 0;
  bottom: 0;
  height: auto;
  border-top-left-radius: 2vw;
  border-top-right-radius: 2vw;
  transform: translateY(100%);
}

.toLeft {
  height: 100vh;
  left: 100vw;
  top: 0;
}

.toRight {
  height: 100vh;
  left: -100vw;
  top: 0;
}

&.active {
  opacity: 1;

  .content {
    opacity: 1;
  }

  .toTop {
    transform: translateY(0);
  }

  .toLeft {
    left: 0;
  }

  .toRight {
    left: 0;
  }
}
